<!-- 商品列表 -->
<template>
  <div class="app">
    <!-- 引入列表list组件 -->
        <van-pull-refresh
      v-model="isLoading"
      :head-height="80"
      @refresh="onRefresh"
      loading-text = "加载中..."
      finished-text = "刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        loading-text="加载中..."
        @load="onLoad"
        :offset="300"
      >
      <van-cell v-for="item in imgList" :key="item.id" class="sell" @click="goway(item.id)">
        <div>
          <div class="c1">
            <img :src="item.img_url" class="imgs" />
          </div>
           <div class="totals">
            <span class="connect">{{item.title}}</span>
          </div>
          <div class="price">
            <span class="sell_price">￥{{item.sell_price}}</span>
            <s class="market_price">￥{{item.market_price}}</s>
            <div class="cateMessage">
              <div class="total">
                <van-tag round type="danger" size="small">热卖中</van-tag>
                <span>剩{{item.stock_quantity}}件</span>
              </div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgList: [],
      loading: false,
      isLoading: false,
      finished: false,
      pageindex: 1
    }
  },
  created () {
    this.getcatemessages(this.pageindex)
  },
  methods: {
    async getcatemessages (pageindex) {
      const { data: res } = await this.$http.get(
        '/api/getgoods?pageindex=' + pageindex
      )
      console.log(res)
      this.imgList = res.message
    },
    // 加载事件
    async onLoad () {
      this.pageindex++
      const { data: res } = await this.$http.get(
        'api/getgoods?pageindex=' + this.pageindex
      )
      if (res.status !== 0) {
        return this.$toast('商品列表获取失败')
      }
      // console.log(res.message)
      if (res.message.length === 0) {
        this.finished = true
      }
      this.imgList.push(...res.message)
      this.loading = false
    },
    goway (id) {
      this.$router.push('/cate?id=' + id)
    },
    onRefresh () {
      this.pageindex = 1
      setTimeout(() => {
        this.finished = false
        this.isLoading = false
        this.$toast('刷新成功')
      }, 1000)
      this.getcatemessages(this.pageindex)
    }
  }
}
</script>
<style  scoped lang="less">
.app {
  padding-bottom: 100px;
}
.van-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
  box-sizing: border-box;
  padding-right: 50px;
  .van-cell {
    position: relative;
    width: 48%;
    transform: translateX(25px);
    padding: 0;
    border: 1px solid #ccc;
    margin: 20px 0 20px 0;
    font-size: 14px;
    .price {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      background-color: #eee;
    }
    .totals {
      padding: 10px;
      margin-bottom: 80px;
    }
    .sell_price {
      color: red;
    }
    .market_price {
      position: absolute;
      left: 70px;
    }
    .cateMessage {
      padding-right: 20px;
    }
    .total {
      display: flex;
      justify-content: space-between;
    }
    .c1 {
      padding: 10px;
      margin-bottom: 20px;
    }
    .imgs {
      width: 100%;
      height: 50%;
    }

  }
}
</style>
